<template>
<div class="sidebar" id="sidebar"><!-- widget about -->
<div class="widget rounded">
  <div class="widget-about data-bg-image text-center" data-bg-image="/source/images/map-bg.png"><img src="/source/images/logo.svg" alt="logo" class="mb-4" />
    <!--  <p class="mb-4" th:text="${SITE_CONFIG.SITE_PERSON_DESC}" ></p>-->
    <ul class="social-icons list-unstyled list-inline mb-0">
      <li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
      <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
      <li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
      <li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
      <li class="list-inline-item"><a href="#"><i class="fab fa-medium"></i></a></li>
      <li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
    </ul>
  </div>
</div>
<!-- widget popular posts -->
<!--<div class="widget rounded">
  <div class="widget-header text-center">
    <h3 class="widget-title">热门文章</h3>
    <img src="/source/images/wave.svg" class="wave" alt="wave" /></div>
  <div class="widget-content">&lt;!&ndash; post &ndash;&gt;
    <div v-for="item in hotList" class="post post-list-sm circle">
      <div class="thumb circle"><span class="number">1</span><a :href="'/blog/article1/'+item.id">
        <img :src="item.coverImage" alt="post-title" height="60px"/>
      </a></div>
      <div class="details clearfix">
        <h6 class="post-title my-0"><a :href="'/blog/article2/'+item.id" :text="item.title" ></a></h6>
        <ul class="meta list-inline mt-1 mb-0">
          <li class="list-inline-item">{{item.createTime}}</li>
        </ul>
      </div>
    </div>
  </div>
</div>-->
<!-- widget categories -->
<!--<div class="widget rounded">
  <div class="widget-header text-center">
    <h3 class="widget-title">主题分类</h3>
    <img src="/source/images/wave.svg" class="wave" alt="wave" /></div>
  <div class="widget-content">
    <ul th:each="category:${CATEGORY_LIST}" class="list">
      <li><a href="#" th:text="${category.name}"></a><span>(5)</span></li>
    </ul>
  </div>
</div>-->
<!-- widget newsletter -->
<!--    <div class="widget rounded">
      <div class="widget-header text-center">
        <h3 class="widget-title">通讯简报</h3>
        <img th:src="@{|/source/images/wave.svg|}" class="wave" alt="wave" /></div>
      <div class="widget-content"><span class="newsletter-headline text-center mb-3">Join 70,000 subscribers!</span>
        <form>
          <div class="mb-2">
            <input class="form-control w-100 text-center" placeholder="Email address…" type="email">
          </div>
          <button class="btn btn-default btn-full" type="submit">Sign Up</button>
        </form>
        <span class="newsletter-privacy text-center mt-3">By signing up,you agree to our <a href="#">Privacy Policy</a></span></div>
    </div>-->
<!-- widget post carousel -->
<div class="widget rounded">
  <div class="widget-header text-center">
    <h3 class="widget-title">猜你喜欢</h3>
    <img src="/source/images/wave.svg" class="wave" alt="wave" /></div>
  <div class="widget-content">
    <div class="post-carousel-widget"><!-- post -->
      <div v-for="item in randomList" class="post post-carousel">
        <div class="thumb rounded"><a href="category.html" class="category-badge position-absolute" >测试</a><a :href="'/blog/article/'+item.id">
          <div class="inner"><img :src="item.coverImage" alt="post-title" /></div>
        </a></div>
        <h5 class="post-title mb-0 mt-4"><a :href="'/blog/article/'+item.id" >{{item.title}}</a></h5>
        <ul class="meta list-inline mt-2 mb-0">
          <li class="list-inline-item"><a href="#">{{item.author}}</a></li>
          <li class="list-inline-item">{{item.createTime}}</li>
        </ul>
      </div>
    </div>
    <!-- carousel arrows -->
    <div class="slick-arrows-bot">
      <button type="button" data-role="none" class="carousel-botNav-prev slick-custom-buttons" aria-label="Previous"><i class="icon-arrow-left"></i></button>
      <button type="button" data-role="none" class="carousel-botNav-next slick-custom-buttons" aria-label="Next"><i class="icon-arrow-right"></i></button>
    </div>
  </div>
</div>
<!-- widget advertisement -->
<div class="widget no-container rounded text-md-center"><span class="ads-title">- 赞助广告-</span><a href="#" class="widget-ads"><img src="/source/images/ads/ad-360.png" alt="Advertisement" /></a></div>
<!-- widget tags -->
<div class="widget rounded">
  <div class="widget-header text-center">
    <h3 class="widget-title">标签云</h3>
    <img src="/source/images/wave.svg" class="wave" alt="wave" /></div>
  <div class="widget-content">
    <router-link v-for="item in tagList" :to="'/blog/tag/'+item.id" class="tag" >{{item.name}}</router-link>
  </div>
</div>
</div>
</template>
<script>
module.exports={
  name: "sidebar",
  data: function() {
    return {
      randomList: [],
      tagList:[]
    }
  },
  mounted(){
    this.getRandom();
    this.getTags();
  },
  methods: {
    getRandom(){
      axios.get('/blog/api/random/articles', {params: {size: 1}})
          .then((res) => {
            // 请求成功返回
            const data = res.data.data;
            this.randomList=data;
          })
          .catch(function (err) {
            // 请求失败返回
            console.log(err);
          })
          .then(function () {
            // 不管成功失败都会执行，可以用来关闭加载效果等
          });
    },
    getTags(){
      axios.get('/blog/api/tag/list')
          .then((res) => {
            // 请求成功返回
            const data = res.data.data;
            this.tagList=data;
          })
          .catch(function (err) {
            // 请求失败返回
            console.log(err);
          })
          .then(function () {
            // 不管成功失败都会执行，可以用来关闭加载效果等
          });
    }
  }
}
</script>
